import { P } from "@/components/ui/typography";
import Link from "next/link";
import { getTranslations } from 'next-intl/server';
const menuList = [
  { id: 1, label: "Friend_Updates" },
  { id: 2, label: "Special_Attention" },
  { id: 3, label: "Related_to_Me" },
];

async function HomeLeft() {
  const t = await getTranslations();
  return (
    <div className="">
      <div className="flex flex-col">
        {menuList.map((item) => (
          <div
            key={item.id}
            className={`border border-gray-200 px-4 py-2 ${
              item.id === menuList[0].id
                ? "rounded-t-md"
                : item.id === menuList[menuList.length - 1].id
                ? "rounded-b-md"
                : ""
            }`}
          >
            <Link href={`/?menu=${item.id}`} className="">
              <P className="cursor-pointer block">{t(item.label)}</P>
            </Link>
          </div>
        ))}
      </div>
    </div>
  );
}

export default HomeLeft;
